<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>刑法典检索</title>
		<!-- Bootstrap -->
		<link href="./css/bootstrap.min.css" rel="stylesheet">



		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
		<script src="https://cdn.jsdelivr.net/npm/html5shiv\@3.7.3/dist/html5shiv.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/respond.js\@1.4.2/dest/respond.min.js"></script>
		<![endif]-->
		<style>
			body{
				background-color:rgb(248,248,248);
			}
		blockquote{
			border:1px solid #eee;
			border-left-width: 5px;
			/* border-left-color: #ce4844; */
			border-radius: 3px;
			font-size:15px;
		}
		blockquote:hover {
			border: 1px solid #ce4844;
			border-left-width: 5px;
		}
				.row{
					margin-top: 1em;
				}
				h1{
					text-align: center;
				}
				
				blockquote>p {
					font-size: 20px;
				}
			.level1, .level2, .level3, .level4, .level5{
				float:left;
				border-radius: 20px;
				height: 60px;
				padding: 15px;
                background-color: #ffffff;
			}

			.level1{
				border: 2px solid darkorange;
				color:darkorange;
                font-size: 150%;
			}
			.level2{
                border: 2px solid #6c6c6c;
                color:#8e7c6a;;
                font-size: 120%;
			}
			.level3{
                border: 0px;
			}
			.level4{
                border: 2px solid #b8d7fb;

			}
			.level5{
                border: 0px;
                background-color: #c8d4e6;
			}
			.line{
				float:left;
				width:3em;
				height:30px;
				border-bottom:2px solid gray;
			}

		</style>
		
	</head>
	<body>
		<div class="container">
			<h1>刑法专科词汇语义知识库</h1>
			<hr />
			<div class="row">

				<div class="col-md-3">
					<label class="radio-inline">
						<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="r1"> 以词语查属性
					</label>
					<label class="radio-inline">
						<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="r2" checked> 以属性查词语
					</label>
				</div>
				<div class="col-md-9 form-inline">
					<div class="form-group">
						<select class="form-control select" data-live-search="true" id="conviction" >
							<option value="0">全选</option>
							<option th:each="conviction : ${convictionAll}" th:text="${conviction.content}" th:value="${conviction.id}"></option>
						</select>
					</div>
					<div class="form-group">
						<select class="form-control select" id="classRelation">
							<option value="0">全选</option>
							<option th:each="classRelation : ${classRelationAll}" th:text="${classRelation.content}" th:value="${classRelation.id}"></option>
						</select>
					</div>
					<div class="form-group">
						<button type="button" class="btn btn-info query">查询</button>
					</div>
				</div>
			</div>
			<br />
			<div id="pageInfo"></div>
			<div class="pageHtml"></div>
			<div id="content"></div>
			<div class="pageHtml"></div>
		</div>

	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="./js/jquery-1.10.1.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="./js/bootstrap.min.js"></script>
	<script>
		var convictionId = 0;
		var classRelationId = 0;
		$(function() {
			$("input[name='inlineRadioOptions']").click(function () {
				if($(this).val() == "r1"){
					location.href = "/index";
				}
			});
			
			$(".query").click(function () {
				convictionId = $("#conviction").val();
				classRelationId = $("#classRelation").val();
				console.log(convictionId + "--" + classRelationId);
				if(convictionId ==0 && classRelationId == 0) {
					alert("请至少选择一个");
				} else {
					initContent(1);
				}

			})
		});

		function initContent(pageNumber){
			$(".pageHtml").empty();
			$("#content").empty();
			$("#pageInfo").empty();

			$.post("/getByConvictionIdOrClassRelationId", {convictionId: convictionId, classRelationId: classRelationId, pageNumber: pageNumber}, function(data) {

				console.log("pageNumber : " + pageNumber);
				console.log(data);
				var html = "";
				for(var i=0; i<data.list.length; i++) {
					html += "<div class='row'>";
					html += "<button class='level1'>" + data.list[i].conviction.content + "</button>";
					html += "<div class='line'></div>";
					for (var j = 0; j < data.list[i].classRelation.content.split("\-").length; j++) {
						html += "<button class='level" + (j + 1) + "'>" + data.list[i].classRelation.content.split("\-")[j] + "</button>";
						html += "<div class='line'></div>";
					}
					html += "<button class='level5'>" + data.list[i].content + "</button>";
					html += "</div>";

				}
				if(data.total==0){
					html = "<p>暂无结果</p>";
				} else {
					$("#pageInfo").html("<p class='text-muted'>当前第 "+pageNumber+" 页，每页显示 "+data.pageSize+" 条，共 "+data.pages+" 页</p>");
					initPage(data.pageNum, data.pages);
				}
				$("#content").html(html);

			});
		}

		function initPage(pageNumber, pages){
			var pageHtml = "<nav aria-label=\"Page navigation\"><ul class=\"pager\">";


			//上一页
			if(pageNumber-1>=1){
				pageHtml += "<li class='previous'><a href='javascript:initContent("+(pageNumber-1)+")'><span aria-hidden=\"true\">&larr;</span> 上一页</a></li>";
			} else {
				pageHtml += "<li class='previous disabled'><a href='javascript:void(0)'><span aria-hidden=\"true\">&larr;</span> 上一页</a></li>";
			}
			//pageHtml += "<li class=\"active\"><a href=\"javascript:void(0)\">"+pageNumber+" <span class=\"sr-only\">(current)</span></a></li>";

			//下一页
			if(pageNumber>=pages){
				pageHtml += "<li class='next disabled'><a href='javascript:void(0)'>下一页 <span aria-hidden=\"true\">&rarr;</span></a></li>";
			} else {
				pageHtml += "<li class='next'><a href='javascript:initContent("+(pageNumber+1)+")'>下一页 <span aria-hidden=\"true\">&rarr;</span></a></li>";
			}


			pageHtml += "</ul></nav>";

			$(".pageHtml").html(pageHtml);
		}


	</script>
</body>
</html>